<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆瓣app-登录-账号密码登录</title>
    <link rel="shortcut icon" href="https://img3.doubanio.com/favicon.ico">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../img/icon/font_iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/app-public.css">
    <link rel="stylesheet" href="../css/login/login-public.css">
    <link rel="stylesheet" href="../css/login/login-account.css">
</head>
<body>
    <div class="mobile">
        <div class="logged_in flexBox">
            <div class="functional_domain flexBox">
                <span class="close iconfont">&#xe679;</span>
            </div>
            <div class="main">
                <div class="title">
                    <span>账号密码登录</span>
                </div>

                <div class="agreement flexBox">
                    <span class="iconfont checkbox">&#xe657;</span>
                    <span class="content">
                        已详读并同意
                        <a href="javascript:void(0);">豆瓣使用协议、个人信息保护政策</a>
                    </span>

                    <div class="tip">
                        &#128064;登录前请勾选
                        <span class="sharp"></span>
                    </div>
                </div>

                <div class="loginForm">
                    <div class="username">
                        <input type="text" placeholder="请输入手机号/邮箱" class="username" data-type="username">
                        <span class="clear iconfont" data-type="clear">&#xe658;</span>
                    </div>
                    <div class="password">
                        <input type="password" placeholder="请输入密码" class="password" data-type="password">
                        <span class="visible iconfont" data-type="visible">&#xe73c;</span>
                    </div>
                    <div class="submit">
                        <input type="submit" value="登录" disabled="disabled" data-type="submit">
                    </div>

                    <div class="bd flexBox">
                        <a href="javascript:void(0);">找回密码</a>
                        <a href="javascript:void(0);">海外手机登录</a>
                    </div>
                </div>
            </div>

            <div class="regUsername_tipBox flexBox">
                <div class="wrong">账号只支持邮箱和手机号</div>
            </div>
            <div class="login_tipBox flexBox">
                <div class="loading">正在登录...</div>
                <div class="wrong">用户名和密码不匹配</div>
                <div class="success">登录成功</div>
            </div>
        </div>
    </div>

    <script src="../lib/jquery-3.6.1.min.js"></script>
    <script src="../js/login-public.js"></script>
    <script>
        $(function(){
            // 返回上一级按钮
            $('.close').on('click',function(){
                window.history.back();
            })

            
            // 设置提示框的位置
            $('.tip').css('left',$('.checkbox').offset().left-35);


            $('.loginForm').on({
                keyup:function(e){
                    var type = e.target.type;
                    if(type == 'text'){
                        if($(e.target).val()) $('.clear').css('display','block');
                        else $('.clear').css('display','none');
                    }
                    else if(type == 'password'){
                        if($(e.target).val()) $('.visible').css('display','block');
                        else $('.visible').css('display','none');
                    }

                    if($('.username input').val() != '' && $('.password input').val() != ''){
                        console.log('can login');
                        $('.submit input').removeAttr('disabled');
                        $('.submit input').addClass('clickable');
                    }
                    else{
                        console.log('can"t login');
                        $('.submit input').attr('disabled','disabled');
                        $('.submit input').removeClass('clickable');
                    }
                },
                click:function(e){
                    var type = e.target.dataset.type;
                    // 清空
                    if(type == 'clear'){
                        $('.username input').val('');
                        $(e.target).css('display','none');
                    }
                    // 密码可见
                    if(type == 'visible'){
                        if($(e.target).hasClass('isVisible')){
                            $('.password input').attr('type','password');
                            $(e.target).removeClass('isVisible');
                        }
                        else{
                            $('.password input').attr('type','text');
                            $(e.target).addClass('isVisible');
                        }
                    }
                    // 登录
                    if(type == 'submit'){
                        // 没勾选协议
                        if($('.checkbox').hasClass('selected') == false){
                            $('.tip').show();
                            tipBoxShow('tip','100%','135%',3000);
                            setTimeout(function(){
                                $('.tip').hide();
                            },3100);
                        }
                        // 勾选协议
                        if($('.checkbox').hasClass('selected')){
                            var username = $('.username input').val();
                            var password = $('.password input').val();

                            var reg1 = /^[0-9]{3,}$/;
                            var reg2 = /[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]{2,})+$/;

                            // 用户名规则判定
                            // 符合 手机号 或 邮箱 的规则 则进行登录判定
                            if(reg1.test(username) || reg2.test(username)){
                                $.ajax({
                                    type:'post',
                                    url:'/login',
                                    data:{username,password},
                                    success:function(res){
                                        console.log('res',res);
                                        $('.login_tipBox .loading').show();

                                        tipBoxShow('login_tipBox','5%','10%',3000);

                                        setTimeout(function(){
                                            $('.login_tipBox .loading').hide();
                                            if(res.status){
                                                $('.login_tipBox .success').show();
                                                tipBoxShow('login_tipBox','5%','10%',500);
                                                setTimeout(function(){
                                                    $('.login_tipBox .wrong').hide();
                                                    window.location.href = 'http://localhost:3000/index.html';
                                                },510)
                                            }
                                            else{
                                                $('.login_tipBox .wrong').show();
                                                tipBoxShow('login_tipBox','5%','10%',3000);
                                                setTimeout(function(){
                                                    $('.login_tipBox .wrong').hide();
                                                },3100)
                                            }
                                        },3100);
                                    },
                                    error:function(err){
                                        console.log('err',err);
                                    }
                                })
                            }
                            else{
                                $('.regUsername_tipBox .wrong').show();
                                $('.regUsername_tipBox').stop().animate({
                                    top:'10px',
                                    opacity:1
                                },200);

                                setTimeout(function(){
                                    $('.regUsername_tipBox').stop().animate({
                                        top:'0px',
                                        opacity:0
                                    },200);
                                },3000);
                                setTimeout(function(){
                                    $('.regUsername_tipBox .wrong').hide();
                                },3100);
                            }
                        }
                    }
                }
            })
        })
    </script>
</body>
</html>